<template>
	<div class="item_cell_group">
		<van-cell-group>
			<van-cell title="选择规格" isLink :value="selectSku.selectedSkuComb.sku_str" @click.native="skuClick" />
			<van-cell title="商品属性" isLink @click.native="propsPopup = true" />
			<van-cell title="配送至" isLink :value="addressVal.area_name"  @click.native="addressPopup = true" />
			<van-cell title="运费" :value="postFee | yuan"/>
		</van-cell-group>
		
		<van-sku
			v-model="showSku"
			:showAddCartBtn="showAddCartBtn"
			:buyText="buyText"
			:sku="skus.sku"
			:goods="skus.goods_info"
			:goodsId="goodsInfo.id"
			:disableStepperInput="true"
			@buy-clicked="buyGoods"
		/>
		
		<van-popup v-model="propsPopup"  position="bottom">
			<popup-props :propsStr="props_str"></popup-props> 	
		</van-popup>
		
		<van-popup v-model="areaPopup" position="bottom">
			<popup-area 
				v-if="areaPopup"
				@confirm="emitAddressVal"
				@cancel="areaPopup = false"
			/>
		</van-popup>
			
		<van-popup v-model="addressPopup" position="bottom">
			<popup-address 
				:is-show="addressPopup"
				:addressVal="addressVal"
				@confirm="emitAddressVal"
				@area-click="areaClick"
			/>
		</van-popup>
	</div>
</template>

<script>
	const popupArea = () => import ( /* webpackChunkName: "popup-area" */ './popup-area')
	import popupAddress from './popup-address'
	import popupProps from './popup-props'
	import actionMixin from "../mix";
	import { ADDRESS, ADDRESS_DEFAULT } from '@/api/user';
	import { POST_FEE } from '@/api/shop';
	
	export default {
		name: "entity-group",

		props: {
			goodsInfo: {
				type: Object,
				default: () => ({})
			},
			selectSku: {
				type: Object,
				default: () => ({})
			},
			addressVal: {
				type: Object,
				default: () => ({})
			},
		},

		mixins: [actionMixin],

		data() {
			const sku = this.skuAdapter(this.goodsInfo.skus, this.goodsInfo.prop_imgs);
			const goods_info = this.setSkuGoodsInfo(this.goodsInfo);
			const postFee = this.goodsInfo.is_fenxiao ? '免邮费' : '';
			return {
				postFee,
				propsPopup: false,
				addressPopup: false,
				areaPopup: false,
				skus: {
					sku,
					goods_info,
				},
			}
		},

		computed: {
			props_str() {
				if (this.goodsInfo.props_str) {
					return this.goodsInfo.props_str.split(";")
						.filter(str => (str != ''))
						.map(str => (str.split(':')))
				}
				return []
			},
			weight(){
				return parseFloat(this.goodsInfo.weight) * this.selectSku.selectedNum
			}
		},
		
		methods: {
			areaClick(){
				this.areaPopup = true;
				this.addressPopup = false;
			},
			emitAddressVal(data){
				this.$emit("update:addressVal", data);
			},
			setSkuGoodsInfo({name, pic_url, sales_price}) {
				return {
					title: name,
					picture: pic_url,
					price: sales_price,
				}
			},
			skuAdapter(skus = [], prop_imgs = []) {
				const tree = this.setSkuTree(skus, prop_imgs);
				const list = this.setSkuList(skus);
				const skuInfo = {
					price: parseInt(this.goodsInfo.sales_price) / 100, //未选择规格时的价格
					stock_num: this.goodsInfo.quantity, //总库存
					collection_id: "", //无规格商品skuId取collection_id，否则取所选sku组合对应的id
					none_sku: false, // 是否无规格商品
					hide_stock: false
				}
				return {
					tree,
					list,
					...skuInfo
				}
			},
			setSkuList(skus) {
				skus.forEach(sku => {
					sku.props.split(";").forEach((str, i) => {
						sku[`s${i + 1}`] = str.match(/[^:]*:([^:]*)/)[1]
					})
					// key值转换适配, 后端数据和组件要求的key不一致
					sku.stock_num = sku.quantity;
					sku.goods_id = sku.props;
					sku.sku_str = sku.props_str;
					sku.price = sku.sales_price;
				})
				return skus
			},
			setSkuTree(skus, prop_imgs) {
				let skulist = [];
				skus.forEach((el) => {
					const propImg = prop_imgs.find(img => (img.props == el.props))
					el.props_str_arr = el.props_str.split(";").filter(str => (str != ''))
					el.props_arr = el.props.split(";").filter(str => (str != ''))
					el.imgUrl = propImg ? propImg.url : '';
				})
				skus.forEach((el) => {
					el.props_str_arr.forEach((sku, i) => {
						let prop = el.props_arr[i]
						//大规格
						let pName = sku.substr(0, sku.indexOf(":"))
						let k_id = prop.substr(0, prop.indexOf(":"))
						//规格值 prop_values
						let vName = sku.substr(sku.indexOf(":") + 1)
						let vid = prop.substr(prop.indexOf(":") + 1)

						if (!skulist[i]) {
							skulist[i] = {
								k_id: k_id,
								k: pName,
								v: [{
									id: vid,
									name: vName,
									imgUrl: el.imgUrl
								}],
								k_s: `s${i + 1}`
							}
						} else {
							let isPass = skulist[i].v.some((val) => val.id == vid);
							!isPass && skulist[i].v.push({
								id: vid,
								name: vName,
								imgUrl: el.imgUrl
							})
						}
					})
				})
				return skulist
			},
		},

		components: {
			popupArea,
			[popupAddress.name]: popupAddress,
			[popupProps.name]: popupProps,
		}
	}

</script>

<style lang="scss" scoped>

</style>
